<template>
	<view class="container">
		<top-back-navbar position="fixed" title="银行绑卡" background="#7155F8" color="#fff"></top-back-navbar>
		<view class="bangka" v-if="bank_obj_err == 0">
			已绑卡
		</view>
		<view class="bangka" v-if="bank_obj_err == 1" style="background-color: red;">
			审核失败
		</view>
		<view class="box" :class="bank_obj_err == 0 || bank_obj_err == 1 ? '':'wei'">
			<view class="item">
				<p>
					开户人姓名
				</p>
				<view class="input">
					<input type="text" value="" v-model="accountName " placeholder="张XX" placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			<view class="item">
				<p>
					银行账号
				</p>
				<view class="input">
					<input type="text" value="" v-model="bankCardNo" placeholder="1XXXXXXXXXXX" placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			<view class="item">
				<p>
					开户银行
				</p>
				<view class="picker-cell input" @click="pickerShow=true">
					<text class="picker-cell-text" v-if="bankname">{{bankname}}</text>
					<text class="picker-cell-placeholder" v-else style="color: #C0C0C0;font-size:14px;">中国XX</text>
					
				</view>
			</view>
			<view class="item">
				<p>
					开户网点
				</p>
				<picker style="width: 60%;" @change="bankCardNoaddarschange"
					@columnchange="bankCardNoaddarscolumnchange"
					:range="[bankCardNoaddars_list,bankCardNoaddarschange_arr2]" mode='multiSelector'
					range-key="areaName"
					>
					<view class="uni-input"   v-if="bankCardNoaddars=='--'" style="color: #C0C0C0;font-size:14px;"> 请选择</view>
					<view class="uni-input"  v-else>
						{{bankCardNoaddars}}
					</view>
					
					
				</picker>
				<view class="" style="position: absolute;right: 0;">
					>
				</view>
			</view>
			<view class="item">
				<p>
					开户支行
				</p>
				<view class="input">
					<input type="text" value="" v-model="bankbranch" placeholder="XX支行" placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			<view class="item">
				<p>
					银行预留手机号
				</p>
				<view class="input">
					<input type="text" value="" v-model="reservedPhoneNo"  placeholder="1XXXXXXXXXX" placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			
			<view class="item">
				<p>
					身份证号码
				</p>
				<view class="input">
					<input type="text" value="" v-model="legalPersonIdNo" placeholder="3XXXXXXXXXXXXXXXXX" placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			<view class="item" style="display: block;">
				<p style="width: 100%;">
					证件有效开始日期
				</p>
				<view class="uni-list-cell-db">
					<picker mode="multiSelector" :value="[y_index,m_index,d_index]" 
					:range="[star_year,star_month,star_day]"
					 @change="idEffectiveDateStartChange"
					 range-key="num"
					 >
						<view class="uni-input" v-if="idEffectiveDateStart!=''">{{idEffectiveDateStart}}</view>
						<view class="uni-input" v-else style="color: #C0C0C0;font-size:14px;"> 请选择</view>
					</picker>
				</view>
				<view class="" style="position: absolute;right: 0;top: 10px;">
					>
				</view>
			</view>
			<view class="item" style="display: block;">
				<p style="width: 100%;">
					证件有效结束日期
				</p>
				<view class="uni-list-cell-db">
					<picker mode="multiSelector" :value="[y_index,m_index,d_index]" 
					:range="[end_year,end_month,end_day]"
					
					@change="idEffectiveDateEndChange"
					range-key="num">
						<view class="uni-input" v-if="idEffectiveDateEnd!=''">{{idEffectiveDateEnd}}</view>
						<view class="uni-input" v-else style="color: #C0C0C0;font-size:14px;"> 请选择</view>
					</picker>
				</view>
				<view class="" @click="idEffectiveDateEnd = '2099-12-31'" style="background-color: #775CF8;
				width: 80px;height: 20px;text-align: center;line-height: 20px; color: #fff;border-radius: 50px;">
					长期
				</view>
				<view class="" style="position: absolute;right: 0;top: 10px;">
					>
				</view>
			</view>
			
			
			<view class="item">
				<p style="width: 100%;">
					请上传身份证人像面
				</p>
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalIdCardProsPathselect" limit="1" ref="filePicker" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image" style="color: #C0C0C0;font-size:14px;">
						请点击上传
					</uni-file-picker>
				</view>
			</view>
			
			<view class="item">
				<p style="width: 100%;">
					请上传身份证国徽面
				</p>
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalIdCardConsPathselect" limit="1" ref="filePickers" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image" style="color: #C0C0C0;font-size:14px;">
							请点击上传
					</uni-file-picker>
				</view>
			</view>
			<view class="item">
				<p>
					身份地址
				</p>
				<picker style="width: 60%;" @change="businessAddresschange" @columnchange="businessAddresscolumnchange"
					:range="[businessAddress_list,businessAddresschange_arr2,businessAddresschange_arr3]"
					mode='multiSelector' range-key="areaName">
					<view class="uni-input" v-if="businessAddress_aa!=''">{{businessAddress_aa}}</view>
					<view class="uni-input" v-else style="color: #C0C0C0;font-size:14px;">请选择身份地址</view>
				</picker>
				<view class="" style="position: absolute;right: 0;">
					>
				</view>
			</view>
			
			<view class="item">
				<p>
					身份证住址信息
				</p>
				<view class="input">
					<input type="text" value="" v-model="businessAddress" placeholder="请输入详细地址" placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			
			<view class="item">
				<p>
					邮箱
				</p>
				<view class="input">
					<input type="text" value="" v-model="contactEmail" placeholder="1XXX@XXX.COM" placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			<!-- <view class="item">
				<p>
					电话
				</p>
				<view class="input">
					<input type="text" value="" v-model="contactPhone" />
				</view>
			</view> -->
			<view class="item">
				<p>
					职业
				</p>
				<view class="uni-list-cell-db">
					<picker @change="professionchange" :value="profession_index" :range="profession_list">
						<view class="uni-input" v-if="profession_list[profession_index] == '请选择职业'" style="color: #C0C0C0;font-size:14px;">{{profession_list[profession_index]}}</view>
						<view class="uni-input" v-else>{{profession_list[profession_index]}}</view>
					</picker>
				</view>
				<view class="" style="position: absolute;right: 0;">
					>
				</view>
			</view>
			
			
			
			

			

		</view>
		<view class="qianyue">
			<view class="" style="width: 100%; text-align: center;color: red;" v-if="bank_obj_err == 1">
				失败原因
			</view>
			<view class="" style="width: 100%; text-align: center;color: red;" v-if="bank_obj_err == 1">
				{{bank_obj_msg}}
			</view>
			<button @click="sure_qianyue()" v-if="bank_obj_err != 0">新增/修改</button>
			<button @click="sure_qianyue()"  v-if="bank_obj_err == 0">新增/修改</button>
		</view>
		
			<u-picker mode="selector" v-model="pickerShow" :range="pickerBanklist" @confirm="confirmBank"></u-picker>
	</view>
</template>

<script>
	export default {

		data() {

			const currentDate = this.getDate({
				format: true
			})
			return {
				openid: '',
				signedName: '',
				contactEmail: '',
				contactPhone: '',
				profession: '',
				legalPersonIdNo: '',
				idEffectiveDateStart: '',
				idEffectiveDateEnd: '',
				legalIdCardProsPath: '',
				legalIdCardConsPath: '',
				accountName: '',
				bankCardNo: '',
				bankbranch:'',
				cityCode: '',
				provinceCode: '',
				reservedPhoneNo: '',
				receiverName: '',
				receiverPhone: '',
				receiverAddress: '',
				businessAddressProvince: '',
				businessAddressCity: '',
				businessAddressArea: '',
				businessAddress: '',
				profession_list: [],
				profession_index: 0,
				idEffectiveDateStart_date: currentDate,
				idEffectiveDateEnd_date: currentDate,
				imageStyles: {
					width: 200,
					height: 150,

				},
				bankCardNoaddars_list: [],
				bankCardNoaddarschange_arr2: [],
				bankCardNoaddars: '--',
				businessAddress_list: [],
				businessAddresschange_arr2: [],
				businessAddresschange_arr3: [],
				businessAddress_aa: '',
				pickerBanklist:[],
				selectBanklist:[],
				pickerShow:false,
				bankname:'',
				bank_obj_err:-1,
				date_arr:[],
				star_year:[],
				star_month:[],
				star_day:[],
				end_year:[],
				end_month:[],
				end_day:[],
				bank_obj_msg:'',
				y_index:0,
				m_index:0,
				d_index:0
				// bankCardNoaddars_index:[0,0]
			};
		},
		onLoad: function() {

			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.get_shoper_data()
					this.getBankList()
					this.get_bank_value()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
			this.set_date()
		},
		mounted() {
			// this.countDownTimer()
		},
		methods: {
			idEffectiveDateStartcolumnchange(e){
				var column = e.detail.column
				var index = e.detail.value
				
				if (column == 0) {
					this.star_month = this.star_year[index].months
					this.star_day = this.star_month[0].days
				}
				if (column == 1) {
					this.star_day = this.star_month[index].days
				}
			},
			idEffectiveDateEndcolumnchange(e){
				var column = e.detail.column
				var index = e.detail.value
				
				if (column == 0) {
					this.end_month = this.end_year[index].months
					this.end_day = this.end_month[0].days
				}
				if (column == 1) {
					this.end_day = this.end_month[index].days
				}
			},
		
			set_date(){
				
				var startYear = 1970;
				var endYear = 2099;
				var yearData=[];
				  var Month=[]
				  var Day=[]
				for (var year = startYear; year <= endYear; year++) {
				  
				  var obj={
					  year: year,
					  num:year+'年'
				  }
					yearData.push( obj)
				
				}
				for (var month = 1; month <= 12; month++) {
				 var obj= { month: month,num:month+'月' };
				 if(obj.month<10){
					 obj.month='0'+obj.month
				 }
				  Month.push(obj)
				}
				for (var day = 1; day <= 31; day++) {
				  var obj= { day: day,num:day+'日' };;
				  if(obj.day<10){
				  					 obj.day='0'+obj.day
				  }
				  Day.push(obj)
				}
			
				this.star_year=yearData
				
				this.star_month=Month
				
				this.star_day=Day
				
				
				
				this.end_year=yearData
				
				this.end_month=Month
				
				this.end_day=Day
				
				
				
				// 创建一个表示今天日期的Date对象
				var today = new Date();
				
				// 获取年份
				var year = today.getFullYear();
				
				// 获取月份（注意：月份从0开始，所以要加1）
				var month = today.getMonth() + 1;
				
				// 获取日期
				var day = today.getDate();
				for(var i = 0;i<yearData.length;i++){
					if(yearData[i].year==year){
						this.y_index=i
					}
				}
				for(var i = 0;i<Month.length;i++){
					if(Month[i].month==month){
					
						this.m_index=i
					}
				}
			
				for(var i = 0;i<Day.length;i++){
			
					if(Day[i].day==day){
						this.d_index=i
					}
				}
				 
				
			},
			getBankList() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw&app=1',
					method: 'POST',
					data: {
						openid: this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						let list = Array.isArray(res.data.banklist)?res.data.banklist:[];
						this.pickerBanklist=list.map(item=>item.bankname)
						this.selectBanklist=list;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			get_bank_value(){
				var _this=this
				uni.request({
					url: `${this.$BASE_URL}/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.show_zishanghu_info&app=1`,
					method: 'POST',
					data: {
						'openid': this.openid,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						
						var data = res.data
						
						this.bank_obj_err=data.error
						this.bank_obj_msg=data.message
						
					},
					fail: () => {},
					complete: () => {}
				})
			},
			confirmBank(e){
				let index=Array.isArray(e) && e.length>0?e[0]:-1;
				if(index>=0){
					this.bankname=this.selectBanklist[index].bankname;
				}
			},
			get_shoper_data() {
				var openid = this.openid
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.get_province_city_area_profession&app=1&openid=' +
						openid,

					success: res => {

						this.profession_list = res.data.profession
						this.profession = res.data.profession[0]
						this.bankCardNoaddars_list = res.data.province_city_data
						this.bankCardNoaddarschange_arr2 = this.bankCardNoaddars_list[0].city

						this.businessAddress_list = res.data.province_city_area_data
							
						this.businessAddresschange_arr2 = this.businessAddress_list[0].city
					
						this.businessAddresschange_arr3 = this.businessAddresschange_arr2[0].area

					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			professionchange(e) {
			
				this.profession_index = e.detail.value
				this.profession = this.profession_list[e.detail.value]
				if(this.profession_list[e.detail.value] != '其他类'){
					this.profession=e.detail.value
				}
				
			},
			idEffectiveDateStartChange(e) {
		
				var index = e.detail.value
			
				var str=
				this.star_year[index[0]].year+'-'+
				this.star_month[index[1]].month+'-'+
				this.star_day[index[2]].day
				
			
				this.idEffectiveDateStart = str
				this.idEffectiveDateStart_date =str
			},
			idEffectiveDateEndChange(e) {
				var index = e.detail.value
				var str=
				this.end_year[index[0]].year+'-'+
				this.end_month[index[1]].month+'-'+
				this.end_day[index[2]].day
				
							
				this.idEffectiveDateEnd = str
				this.idEffectiveDateEnd_date =str
				
		
			},

			legalIdCardProsPathselect(e) {
			

				var filePath = e.tempFilePaths[0]

				var _this = this

				uni.uploadFile({
					url: this.$BASE_URL + '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',

					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {

						var data = JSON.parse(res.data)


						if (data.error == 0) {

							this.legalIdCardProsPath = data.url


						} else {


							this.legalIdCardProsPath = ''
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
							this.$refs.filePicker.clearFiles();
						}
					},
					fail() {

					}
				});

			},

			legalIdCardConsPathselect(e) {
				

				var filePath = e.tempFilePaths[0]

				var _this = this

				uni.uploadFile({
					url: this.$BASE_URL + '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',

					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {

						var data = JSON.parse(res.data)


						if (data.error == 0) {

							this.legalIdCardConsPath = data.url


						} else {


							this.legalIdCardConsPath = ''
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
							this.$refs.filePickers.clearFiles();
						}
					},
					fail() {

					}
				});
			},

			bankCardNoaddarschange(e) {

				var index = e.detail.value

				var addars = this.bankCardNoaddars_list[index[0]].areaName + this.bankCardNoaddars_list[index[0]].city[
					index[1]].areaName

				this.provinceCode = this.bankCardNoaddars_list[index[0]].areaCode
				this.cityCode = this.bankCardNoaddars_list[index[0]].city[index[1]].areaCode

				this.bankCardNoaddars = addars
			},
			bankCardNoaddarscolumnchange(e) {
				var column = e.detail.column
				if (column == 0) {
					this.bankCardNoaddarschange_arr2 = this.bankCardNoaddars_list[e.detail.value].city

				}



			},
			businessAddresschange(e) {
				var index = e.detail.value

				var shen = this.businessAddress_list[index[0]]
				var shi = shen.city[index[1]]
				var xian = shi.area[index[2]]

				this.businessAddress_aa = shen.areaName + shi.areaName + xian.areaName

				this.businessAddressProvince = shen.areaCode
				this.businessAddressCity = shi.areaCode
				this.businessAddressArea = xian.areaCode
			},
			businessAddresscolumnchange(e) {

				var column = e.detail.column
				var index = e.detail.value
				if (column == 0) {
					this.businessAddresschange_arr2 = this.businessAddress_list[index].city
					this.businessAddresschange_arr3 = this.businessAddresschange_arr2[0].area
				}
				if (column == 1) {
					this.businessAddresschange_arr3 = this.businessAddresschange_arr2[index].area
				}



			},

			sure_qianyue() {
				var openid = this.openid
				// 'contactPhone': this.contactPhone, 手机号
				// 'receiverName': this.receiverName,
				// 'receiverPhone': this.receiverPhone,
				// 'receiverAddress': this.receiverAddress,
				// 'signedName': this.signedName,
				var data = {
					'openid': this.openid,
					'contactEmail': this.contactEmail,
					'profession': this.profession,
					'legalPersonIdNo': this.legalPersonIdNo,
					'idEffectiveDateStart': this.idEffectiveDateStart,
					'idEffectiveDateEnd': this.idEffectiveDateEnd,
					'legalIdCardProsPath': this.legalIdCardProsPath,
					'legalIdCardConsPath': this.legalIdCardConsPath,
					'accountName': this.accountName,
					'bankCardNo': this.bankCardNo,
					'cityCode': this.cityCode,
					'provinceCode': this.provinceCode,
					'reservedPhoneNo': this.reservedPhoneNo,
					'businessAddressProvince': this.businessAddressProvince,
					'businessAddressCity': this.businessAddressCity,
					'businessAddressArea': this.businessAddressArea,
					'businessAddress': this.businessAddress,
					'bankbranch':this.bankbranch,
					'bankname':this.bankname,
				}
				let aujs=true
				for (let key in data) {
					if (data[key] == '') {
						aujs=false
					}
				
				}
				if(!aujs){
					uni.showToast({
						icon:'none',
						title:'有值未填'
					})
				}
				else{
					
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.zishanghu&app=1&openid=',
						data: data,
						success: res => {
							var data = res.data
							if (data.error == 1) {
								uni.showToast({
									icon: 'none',
									title: data.message
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: data.message,
									success() {
										setTimeout(()=>{
											uni.reLaunch({
												url:'/pagesZA/media/media'
											})
										},3000)
									}
								})
								
							}
						},
						fail: () => {},
						complete: () => {
					
						}
					});
				}


			},




			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}

		}

	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	page {
		background-size: 100% 100%;
		height: 100%;
	}


	.container {
		height: 100vh;
		width: 100vw;
		background-color: #F1F4F9;
		padding: 20px 10px;
		position: relative;
		
	}
	.bangka{
		width: 20%;
		background-color: #7155F8;
		color: #fff;
		text-align: center;
		border-radius: 50px;
		height: 30px;
		line-height: 30px;
		margin-bottom: 20rpx;
	}
	.box {
		width: 100%;
		height: 55vh;
		overflow: auto;
		background-color: #fff;
		border-radius: 10px;
		padding: 0 15rpx;
	
		.item {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #DFDFDF;
			padding: 15upx 0;
			position: relative;
			p {
				width: 35%;
			}
			.input{
				width: 65%;
				input {
					width:100%;
					
				
				}
			}
			
		}


	}
	.wei{
		height: 70vh;
	}
	.qianyue {
		width: 100%;
		position: absolute;
		bottom: 25px;
		padding: 0 15px;
		left: 0;
		right: 0;
		margin: auto;

		button {
			width: 100%;
			height: 40px;
			font-size: 20px;
			background-color: #775CF8;
			color: #fff;
			line-height: 40px;
			border-radius: 50px;
			margin-top: 20px;
		}
	}

	.example-body {
		// padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>